{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="10" >
            <el-button type="primary" size="small" @click="add">新增反馈分类</el-button>
        </el-col>
    </el-row>


    <el-table
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="类型名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="备注说明"
          align="center"
          prop="remark">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          width="80"
          >
            <template slot-scope="status">
                <el-tag type="success"v-if="status.row.status">启用</el-tag>
                <el-tag type="info"v-else>禁用</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="350">
            <template slot-scope="c">
                <el-button type="danger" size="mini" @click="_wspost('{:url(\'cateDel\')}',{id:c.row.id})">删除</el-button>
                <el-button v-if="c.row.status" type="info" size="mini" @click="close(c.row)">禁用</el-button>
                <el-button v-else type="primary" size="mini" @click="close(c.row)">启用</el-button>
                <el-button type="success" size="mini" @click="href('{:url('index')}?cate_id='+c.row.id)">查看反馈</el-button>
                <el-button type="success" size="mini" @click="edit(c.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>

    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle" width="500px" :visible.sync="addVisible">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="分类名称"prop="name">
                <el-input v-model="data.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="备注说明" prop="remark">
                <el-input type="textarea" v-model="data.remark" placeholder="备注说明"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="data.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">启用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'cateAdd\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        addVisible:false, //添加菜单框
        dialogTitle:'编辑反馈类型',
        data:{}, // 添加、编辑数据
        rules:{
            name:[
                {required: true, message:'请输入分类名称'},
            ],
        },
    },
    created(){
        this.emptyData();
    },
    methods:{
        emptyData(newData={}){
            this.data=Object.assign({
                name:'',
                remark:'',
                status:1,
            },newData);
        },
        showDialog(isShow=true){
            this.addVisible=isShow;
        },
        // 新增
        add(data){
            this.dialogTitle='新增反馈类型';
            this.emptyData(data);
            this.showDialog();
        },
        // 编辑
        edit(row){
            this.dialogTitle='编辑反馈类型';
            this.emptyData(row);
            this.showDialog();
        },
        // 禁用、启用用户
        close(row){
            this._wspost("{:url('cateClose')}",{'id':row.id},res=>{
                if(res.code){
                    row.status=!row.status;
                }
            },false);
        },
        
    },
});
</script>
{/block}